<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。
		</demo-desc>

		<fu-section title="切换状态" customClass="fu-m-t-20" type="line">
			<fu-switch v-model="loading" size="25" @change="(val) => loading = !val"></fu-switch>
		</fu-section>

		<fu-section title="是否开启动画" customClass="fu-m-t-20" type="line">
			<fu-switch v-model="animate" size="25" @change="(val) => animate = !val"></fu-switch>
		</fu-section>

		<fu-section title="基础案例" customClass="fu-m-t-20" type="line">
			<fu-skeleton :loading="loading" :skeleton="skeleton1" :animate="animate">
				<fu-text text="骨架屏" size="28rpx" bold lines="1"></fu-text>
				<fu-text text="骨架屏一般用于页面在请求远程数据尚未完成时，在内容加载出来前展示与内容布局结构一致的灰白块，提升用户视觉体验。" lines="1" color="#999999" size="28rpx" margin="8rpx 0 0"></fu-text>
				<fu-text text="骨架屏一般用于页面在请求远程数据尚未完成时，在内容加载出来前展示与内容布局结构一致的灰白块，提升用户视觉体验。" lines="1" color="#999999" size="28rpx" margin="8rpx 0 0"></fu-text>
			</fu-skeleton>
		</fu-section>

		<fu-section title="自定义段落行数" customClass="fu-m-t-20" type="line">
			<fu-skeleton :loading="loading" :skeleton="skeleton2" :animate="animate">
				<fu-text text="骨架屏" size="28rpx" bold></fu-text>
				<fu-text text="骨架屏一般用于页面在请求远程数据尚未完成" color="#999999" size="28rpx" lines="1" margin="28rpx 0 0"></fu-text>
				<fu-text text="骨架屏一般用于页面在请求远程数据尚未完成时，在内容加载出来前展示与内容布局结构一致的灰白块，提升用户视觉体验。" color="#999999" size="28rpx" lines="1" margin="18rpx 0 0"></fu-text>
				<fu-text text="骨架屏一般用于页面在请求远程数据尚未完成时，在内容加载出来前展示与内容布局结构一致的灰白块，提升用户视觉体验。" lines="1" color="#999999" size="28rpx" margin="18rpx 0 0"></fu-text>
			</fu-skeleton>
		</fu-section>

		<fu-section title="设置段落宽度" customClass="fu-m-t-20" type="line">
			<fu-skeleton :loading="loading" :skeleton="skeleton3" :animate="animate">
				<view class="fu-flex">
					<fu-avatar></fu-avatar>
					<view class="fu-m-l-30">
						<fu-text text="骨架屏" size="28rpx" bold></fu-text>
						<fu-text text="骨架屏一般用于页面在请求远程数据尚未完成时，在内容加载出来前展示与内容布局结构一致的灰白块，提升用户视觉体验。" color="#999999" size="28rpx" lines="1" margin="18rpx 0 0"></fu-text>
						<fu-text text="骨架屏一般用于页面在请求远程数据尚未完成时，在内容加载出来前展示与内容布局结构一致的灰白块，提升用户视觉体验。" lines="1" color="#999999" size="28rpx" margin="18rpx 0 0"></fu-text>
					</view>
				</view>
			</fu-skeleton>
		</fu-section>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	// data数据
	let animate = ref(true);
	let loading = ref(true);
	const skeleton1 = ref([{
		type: 'line',
		num: 3,
		gap: '20rpx'
	}]);

	const skeleton2 = [{
		type: 'line',
		num: 4,
		gap: '20rpx',
		style: ['width: 200rpx;height:50rpx;marginBottom: 20rpx;', null, null, 'width: 500rpx;']
	}];

	const skeleton3 = [{
		type: 'flex',
		num: 1,
		children: [{
			type: 'avatar',
			num: 1,
			style: 'marginRight: 10rpx;'
		}, {
			type: 'line',
			num: 3,
			gap: '28rpx',
			style: ['width: 200rpx;', null, 'width:400rpx;']
		}]
	}];
</script>

<style lang="scss">

</style>